<template>
  <view class="main">
    <up-popup :safeAreaInsetBottom="false" bgColor="transparent" :mode="props.mode" :show="props.show" @close="emit('close')" >
      <view class="pop-main" :style="{width: props.width}">
        <view class="title-box">
          <view class="title-bg dispaly-align-center">
            <image class="one" src="/static/pop/one.png" mode="aspectFill"/>
            <view class="title-name">{{props.title}}</view>
            <image class="two" src="/static/pop/two.png" mode="aspectFill" @click="emit('close')"/>
          </view>
        </view>
        <view class="content" :style="{width: props.width}">
          <image class="c-bg" src="/static/pop/three.png" mode="aspectFill"/>
          <view class="slot">
            <slot></slot>
          </view>
          <view class="icon">
            <image  src="/static/pop/six.png" mode="aspectFill"/>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'center'
  },
  title:{
    type: String,
    default: '标题'
  },
  width: {
    type: String,
    default: '492rpx'
  }
})

const emit = defineEmits(['close'])
</script>

<style lang="scss" scoped>
.main {
  .pop-main {
    .title-box {
      width: 492rpx;
      height: 78rpx;
      .title-bg {
        position: relative;
        width: 100%;
        height: 78rpx;
        .one {
          position: absolute;
          top: 0;
          width: 100%;
          height: 78rpx;
        }
        .two {
          position: absolute;
          right: 15rpx;
          width: 46rpx;
          height: 46rpx;
        }
        .title-name {
          position: absolute;
          transform: scale(50%, 50%);
          font-family: IPix;
          font-size: 58rpx;
          color: #000;
        }
      }
    }
    .content {
      width: 492rpx;
      height: 332rpx;
      position: relative;
      .c-bg {
        width: 100%;
        height: 332rpx;
      }
      .slot {
        position: absolute;
        top: 0;
        transform:(-50%,-50%)
      }
      .icon {
        position: absolute;
        left: 44rpx;
        bottom: 44rpx;
        image {
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }
}
</style>